<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易</title>
    <style type="text/css">
        body {
             /*background: -webkit-radial-gradient(farthest-side,#d3e7f2,#8bcaeb,#1691d7);
            background: radial-gradient(farthest-side,#d3e7f2,#8bcaeb, #1691d7); */
            background-color: #1691d7;
        }
        #first {
            width: 330px;
            height: 200px;
            background-color: #fff;
            margin: 360px auto;
            color: red;
            font: bolder 20px/200px "Microsoft YaHei";
            text-align: center;
        }
        #box1 {
            /*opacity: 0.3;*/
            display: none;
        }
        #netease {
            display: inline-block;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -312px;
            margin-top:-172px;
        }
        ul {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            border:1px solid #45a1d2;
            border-bottom-width: 0px;
            float: left;
        }
        ul li {
            width: 220px;
            height: 85px;
            border-bottom: 1px solid #45a1d2;
            opacity: 0.4;
        }
        #board {
            width: 400px;
            height: 343px;
            border:1px solid #45a1d2;
            background-color: #fff;
            display: inline-block;
            position: relative;
        }
        .sub-board {
            margin: auto 74px;
            display: none;
        }
        #board .sub-board form input {
            margin: 10px 0px;
        }
        #board .sub-board h2 {
            margin-bottom: 0px;
        }
        #board .sub-board form #num,#board .sub-board form #pas,#board .sub-board form #version {
            margin-top: 20px;
            /*background-color: white;*/
        }
        #board .sub-board #down {
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div id="first">欢迎首次来到网易邮箱，请注册</div>
    <div id="box1">
        <div id="netease">
            <ul>
                <li style="opacity:1"><img src="img/163.jpg" alt=""></li>
                <li><img src="img/126.jpg" alt=""></li>
                <li><img src="img/yeah.jpg" alt=""></li>
                <li><img src="img/phone.jpg" alt=""></li>
            </ul>
            <div id="board">
            <!-- 163 -->
                <div class="sub-board" style="display:block" id="sub1">
                    <h2>登录<b style="color:blue" >163</b>免费邮箱</h2>
                    <form>
                        <div id="num" style="border:1px solid lightblue; display:inline-block">
                            <input type="email" name="" placeholder="账号或手机号" style="display:inline-block; border-width:0px;">
                            <b style="color:blue; display:inline-block; border-left:1px solid lightgrey; padding:12px 0px;">@163.com</b>
                        </div>
                        <div id="pas" style="border:1px solid lightblue; display:inline-block">
                            <input type="password" name="" placeholder="密码" style="display:inline-block; border-width:0px;">
                            <button style="padding:11px 16px; background-color:#1d69a5;color:white">登 录</button>    
                        </div>
                    </br>
                        <div>
                            <input type="checkbox" name="" checked="checked" style="display:inline-block">记住账号&nbsp;&nbsp;
                            <input type="checkbox" name="" checked="checked" style="display:inline-block">SSL安全登录
                        </div>
                    <hr>
                        <div id="version">
                            <span style="font-size:14px;">邮箱版本:</span>
                            <select name="" id="" style="border-width:0px;">
                                <option value="默认版本">默认版本</option>
                                <option value="网易邮箱6.0版">网易邮箱6.0版</option>
                                <option value="网易邮箱6.0简约版">网易邮箱6.0简约版</option>
                            </select>
                        </div>
                    </form>
                    <div id="down">
                        <a href="http://mail.163.com/dashi/" target="_blank"><img src="img/down.jpg"></a>
                    </div>
                </div>
                <!-- 126 -->
                <div class="sub-board" id="sub2">
                    <h2>登录<b style="color:#53ad63" >126</b>免费邮箱</h2>
                    <form>
                        <div id="num" style="border:1px solid lightblue; display:inline-block">
                            <input type="email" name="" placeholder="账号或手机号" style="display:inline-block; border-width:0px;">
                            <b style="color:#53ad63; display:inline-block; border-left:1px solid lightgrey; padding:12px 0px;">@126.com</b>
                        </div>
                        <div id="pas" style="border:1px solid lightblue; display:inline-block">
                            <input type="password" name="" placeholder="密码" style="display:inline-block; border-width:0px;">
                            <button style="padding:11px 16px; background-color:#53ad63;color:white">登 录</button>    
                        </div>
                    </br>
                        <div>
                            <input type="checkbox" name="" checked="checked" style="display:inline-block">记住账号&nbsp;&nbsp;
                            <input type="checkbox" name="" checked="checked" style="display:inline-block">SSL安全登录
                        </div>
                    <hr>
                        <div id="version">
                            <span style="font-size:14px;">邮箱版本:</span>
                            <select name="" id="" style="border-width:0px;">
                                <option value="默认版本">默认版本</option>
                                <option value="网易邮箱6.0版">网易邮箱6.0版</option>
                                <option value="网易邮箱6.0简约版">网易邮箱6.0简约版</option>
                            </select>
                        </div>
                    </form>
                    <div id="down">
                        <a href="http://mail.163.com/dashi/" target="_blank"><img src="img/down.jpg"></a>
                    </div>
                </div>
                <!-- yeah -->
                <div class="sub-board" id="sub3">
                    <h2>登录<b style="color:#cd1419" >yeah</b>免费邮箱</h2>
                    <form>
                        <div id="num" style="border:1px solid lightblue; display:inline-block">
                            <input type="email" name="" placeholder="账号或手机号" style="display:inline-block; border-width:0px;">
                            <b style="font-size:14px; color:#cd1419; display:inline-block; border-left:1px solid lightgrey; padding:13px 0px;">@yeah.net</b>
                        </div>
                        <div id="pas" style="border:1px solid lightblue; display:inline-block">
                            <input type="password" name="" placeholder="密码" style="display:inline-block; border-width:0px;">
                            <button style="padding:11px 16px; background-color:#cd1419;color:white">登 录</button>    
                        </div>
                    </br>
                        <div>
                            <input type="checkbox" name="" checked="checked" style="display:inline-block">记住账号&nbsp;&nbsp;
                            <input type="checkbox" name="" checked="checked" style="display:inline-block">SSL安全登录
                        </div>
                    <hr>
                        <div id="version">
                            <span style="font-size:14px;">邮箱版本:</span>
                            <select name="" id="" style="border-width:0px;">
                                <option value="默认版本">默认版本</option>
                                <option value="网易邮箱6.0版">网易邮箱6.0版</option>
                                <option value="网易邮箱6.0简约版">网易邮箱6.0简约版</option>
                            </select>
                        </div>
                    </form>
                    <div id="down">
                        <a href="http://mail.163.com/dashi/" target="_blank"><img src="img/down.jpg"></a>
                    </div>
                </div>
                <!-- phone -->
                <div class="sub-board" id="sub4">
                    <h2>登录<b style="color:#cd1419" >手机号码</b>邮箱</h2>
                    <form>
                        <div id="num" style="border:1px solid lightblue; display:inline-block">
                            <input type="email" name="" placeholder="请输入手机号" style="display:inline-block; border-width:0px;">
                            <b style="font-size:14px; color:#cd1419; display:inline-block; border-left:1px solid lightgrey; padding:13px 0px;">@phon.net</b>
                        </div>
                        <div id="pas" style="border:1px solid lightblue; display:inline-block">
                            <input type="password" name="" placeholder="密码" style="display:inline-block; border-width:0px;">
                            <button style="padding:11px 16px; background-color:#cd1419;color:white">登 录</button>    
                        </div>
                    </br>
                        <div>
                            <input type="checkbox" name="" checked="checked" style="display:inline-block">记住账号&nbsp;&nbsp;
                            <input type="checkbox" name="" checked="checked" style="display:inline-block">SSL安全登录
                        </div>
                    <hr>
                        <div id="version" style="font-size:15px;">
                            <span>还没网易手机号码邮箱？</span>
                            <a href="http://reg.email.163.com/unireg/call.do?cmd=register.entrance&flow=mobile&from=email_mobile" target="_blank"  style="text-decoration: none">免费激活</a>
                        </div>
                    </form>
                    <div id="down" style="margin-top:32px;">
                        <a href="http://mail.163.com/dashi/" target="_blank"><img src="img/down.jpg"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    if(window.localStorage){
        var local = window.localStorage;
        var first = document.querySelector("#first");
        var box1 = document.querySelector("#box1");
        if(local.getItem("firstCome")){
            first.style.display = "none";
            box1.style.display = "block";
        }
        first.onclick = function() {
            first.style.display = "none";
            box1.style.display = "block";
        }

        local.setItem("firstCome","true");
        // local.removeItem("firstCome");
    }
    else {
        alert("请尝试谷歌浏览器");
    }
    // -------------------------------------------------
    var tabs = document.getElementsByTagName("li");
    var sub1 = document.getElementById("sub1");
    var sub2 = document.getElementById("sub2");
    var sub3 = document.getElementById("sub3");
    var sub4 = document.getElementById("sub4");
    tabs[0].onclick = function() {
        sub1.style.display = "block";
        sub2.style.display = "none";
        sub3.style.display = "none";
        sub4.style.display = "none";
        for(var i = 0; i<4; i++){
            tabs[i].style.opacity = 0.4;
        }
         tabs[0].style.opacity = 1;    
    }
    tabs[1].onclick = function() {
        sub1.style.display = "none";
        sub2.style.display = "block";
        sub3.style.display = "none";
        sub4.style.display = "none";
        for(var i = 0; i<4; i++){
            tabs[i].style.opacity = 0.4;
        }
         tabs[1].style.opacity = 1;       
    }
    tabs[2].onclick = function() {
        sub1.style.display = "none";
        sub2.style.display = "none";
        sub3.style.display = "block";
        sub4.style.display = "none";
        for(var i = 0; i<4; i++){
            tabs[i].style.opacity = 0.4;
        }
         tabs[2].style.opacity = 1;       
    }
    tabs[3].onclick = function() {
        sub1.style.display = "none";
        sub2.style.display = "none";
        sub3.style.display = "none";
        sub4.style.display = "block";
        for(var i = 0; i<4; i++){
            tabs[i].style.opacity = 0.4;
        }
         tabs[3].style.opacity = 1;       
    }
    // var board = document.getElementById("board");
    // var subs = board.getElementsByTagName("div");
    // for (var i=0; i<3; i++)
    // {
    //     tabs[i].index = i;
    //     tabs[i].onclick = function() {
    //         for (var i=0; i<3; i++) {
    //             subs[i].style.display = "none";
    //             subs[i].style.opacity = "0.4";
    //         }
    //         subs[this.index].style.display = "block";
    //         subs[this.index].style.opacity = "1";
    //     }
    // }
</script>
</html>
